<template>
    <div class="container">
        <van-nav-bar
            title="我的发布"
            left-text="返回"
            left-arrow
            fixed
            @click-left="onClickLeft"
        />
        <div class="content">
            <!-- 这里可以添加你的房源列表等 -->
            <van-list
                v-model:loading="loading"
                :finished="finished"
                @load="onLoad"
            >
                <van-cell v-for="item in listingList":key="item.listingId">
                    <div class="ad-container">
                        <van-row>
                            <van-col span="8" >
                                <van-image width="100px" height="100px" :src="item.cover" />
                            </van-col>
                            <van-col span="16">
                                <div style="font-size: 14px;text-align: left">
                                    {{item.description}}
                                </div>
                                <van-col span="6">
                                    {{item.price}}元/月
                                </van-col>
                                {{ storeUser.user.shiming == 1 ? '已实名' : '未实名' }}
                                <van-col span="12">
                                    {{item.advantage}} {{item.type}} {{item.houseType}}
                                </van-col>
                            </van-col>
                            <van-col span="16">
                                <div class="ad-footer">注意：以上信息仅供参考，详情请联系房东</div>
                            </van-col>
                            <van-col span="8">
                                <div class="ad-actions">
                                    <button @click="showShare = true">分享房源</button>
                                    <van-share-sheet
                                        v-model:show="showShare"
                                        title="立即分享给好友"
                                        :options="options"
                                        @select="onSelect"
                                    />
                                    <button @click="deleteListing(item.listingId)">下架</button>
                                </div>
                            </van-col>
                        </van-row>
                    </div>
                    <div v-if="storeUser.user.shiming != 1">
                        <van-cell title="三步认证极大提高租房成功率" is-link @click="sb" />
                    </div>
                    <div v-if="storeUser.user.shiming == 1">
                        <img src="http://39.106.55.36:9001/java2401/zhexiantu.png" style="width:400px; height:200px;">
                        <div class="container">
                            <div class="data-item">浏览：{{item.popularity}}</div>
                            <div class="data-item">收藏：{{item.collect}}</div>
                            <div class="data-item">沟通：1285</div>
                        </div>
                    </div>
                </van-cell>
            </van-list>
            <van-list
                v-model:loading="loading"
                :finished="finished"
                @load="onLoad2"
            >
                <van-cell v-for="(item, index) in userList" :key="index">
                    <div v-if="storeUser.user.shiming == 1" class="card">
                        <div class="card-avatar">
                            <van-image :src="item.avatar" round />
                        </div>
                        <div class="card-content">
                            <h3 class="nickname">{{ item.nickname }}</h3>
                            <p class="browse-time">浏览时间: 04.10 15:56:36</p>
                            <p class="status">状态: {{ item.shiming == 1 ? '已实名' : '未实名' }}, 非中介保证金</p>
                        </div>
                    </div>
                </van-cell>
            </van-list>
            <div class="empty-state" v-if="!hasPosts">
                <van-icon name="empty" class="empty-icon" />
                <van-button round block type="primary" @click="goToPublishPage">发布房源</van-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {get} from "../../util/request.js";
import {showToast} from "vant";
import {useStore} from "../../pinia/index.js";
const router=useRouter();
const storeUser=useStore();
const hasPosts = ref(false); // 假设这里没有房源
const listingList = ref([])
const userList = ref([])
const browseList = ref([])
const collectList = ref([])
const loading = ref(false);
const finished = ref(false);
const showShare = ref(false);
const options = [
    { name: '微信', icon: 'wechat' },
    { name: '微博', icon: 'weibo' },
    { name: '复制链接', icon: 'link' },
    { name: '分享海报', icon: 'poster' },
    { name: '二维码', icon: 'qrcode' },
];

const onClickLeft = () => history.back();
const show = ref(false);
const sb = () => {
    router.push("/message")
};
const onSelect = (option) => {
    showToast(option.name);
    showShare.value = false;
};
const goToPublishPage = () => {
    // 这里可以添加跳转到发布页面的逻辑
    router.push("/postingDetail");
};

const onLoad = () => {
    get("user/listing",{id:storeUser.user.id}).then(res=>{
        if (res.code === 0){
            showToast('加载发布成功');
            listingList.value=res.data
            finished.value=true;
            loading.value=true;
            // console.log(JSON.stringify(listingList.value))
        } else {
            showToast('加载发布失败');
        }
    })
};

const onLoad2 = () => {
    get("user/list").then(res=>{
        if (res.code === 0){
            userList.value=res.data
            browseList.value=res.data
            // console.log(JSON.stringify(userList.value))
            // console.log(browseList.value.length)// 该房源id对应的所有浏览量
            finished.value=true;
            loading.value=true;
            // console.log(JSON.stringify(userList.value))
        } else {
            showToast('网络错误');
        }
    })
    // // 查询该房源id对应的用户浏览列表
    // listingList.forEach(item => {
    //     // 调用函数并传递 listingId
    //     get("browse/list",{id:item.listingId}).then(res=>{
    //         if (res.code === 0){
    //             userList.value=res.data
    //             browseList.value=res.data
    //             console.log(JSON.stringify(res.data.userId))// 该房源id对应所有浏览用户id记录
    //             console.log(browseList.value.length)// 该房源id对应的所有浏览量
    //             finished.value=true;
    //             loading.value=true;
    //             // console.log(JSON.stringify(userList.value))
    //         } else {
    //             showToast('网络错误');
    //         }
    //     })
    // });
};
const deleteListing = (listingId)=>{
    get("user/listingDelete",{id:listingId}).then(res=>{
        if (res.code === 0){
            showToast('下架成功');
            window.location.reload();
            // console.log(JSON.stringify(listingList.value))
        } else {
            showToast('网络错误');
        }
    })
}
</script>

<style scoped>
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
}
.ad-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    margin-top:50px;
    left:0;
    top:0
}
.ad-header {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}
.ad-details {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
}
.ad-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.ad-actions button {
    padding: 5px 10px;
    border: none;
    background-color: #007BFF;
    color: white;
    cursor: pointer;
    font-size: 14px;
}
.ad-actions button:hover {
    background-color: #0056b3;
}

.hidden-title .van-cell__title {
    /* 隐藏标题内容但保留布局占位 */
    font-size: 0; /* 或者使用其他隐藏技巧，如 color: transparent; */
    line-height: 0; /* 行高设置为 0 不会影响布局占位，但会隐藏文本 */
    /* 注意：这种方法不会减少 cell 的总高度，因为还有其他元素可能占据空间 */
}

/* 价格列表样式 */
.listPrice {
    margin-top: 5px; /* 与描述文本之间的间距 */
}

/* 底部信息样式 */
.ad-footer {
    font-size: 12px;
    color: #777;
    margin-top: 10px; /* 与列表价格的间距 */
    left: 0px;
}

/* 行动按钮样式 */
.ad-actions {
    display: flex;
    justify-content: space-between; /* 按钮之间均匀分布 */
    margin-top: 10px; /* 与文本信息的间距 */
}

/* 灰色按钮样式 */
.gray-button {
    background-color: #ddd; /* 灰色背景 */
    border: none; /* 无边框 */
    color: #333; /* 文本颜色 */
    padding: 5px 10px; /* 内边距 */
    cursor: pointer; /* 鼠标悬停时显示小手 */
}

.container {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.data-item {
    flex: 1; /* 占据等份空间 */
    text-align: center; /* 文字居中 */
    padding: 10px; /* 添加一些内边距使数据更清晰 */
    border: 1px solid #ddd; /* 添加边框以区分每个div */
    box-sizing: border-box; /* 使边框和内边距不影响div的总宽度 */
}
.card {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
}
.card-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #ccc; /* 这里应该使用实际的头像图片 */
}
.card-content {
    flex: 1;
    margin-left: 10px;
}
.nickname {
    /* 文本左对齐和加粗 */
    text-align: left; /* 默认情况下 h3 就是左对齐的，这里可以省略 */
    font-weight: bold;
}

.browse-time {
    /* 文本定位到右上角 */
    position: absolute;
    top: 0;
    right: 0;
    /* 可能还需要添加一些 padding 或者 margin 来避免文本贴边 */
    padding: 5px 10px;
    /* 其他样式如字体大小、颜色等 */
}

.status {
    /* 文本左对齐 */
    text-align: left; /* 默认情况下 p 就是左对齐的，这里可以省略 */
    /* 您可以添加其他样式，如字体大小、颜色等 */
}
</style>